import React from 'react'
import 'antd/dist/antd.css'
import {  Form,Input,Button,Checkbox } from 'antd'
import useInputState from './useInputState';

const TodoForm = ({saveTodo}) =>{

  const { value, reset, onChange } = useInputState();

  const onFinish = (values) => {
    console.log('Success:', value);
    saveTodo(value);
    reset();
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item className="form-input" >
        <Input placeholder="Add Todo" onChange={onChange} value={value} size="large"/>
      </Form.Item>
      {/*<Form.Item className="form-btn">*/}
      {/*  <Button type="primary" htmlType="submit">*/}
      {/*    Submit*/}
      {/*  </Button>*/}
      {/*</Form.Item>*/}
    </Form>
  )
}

export default TodoForm
